import React, {memo}  from "react";
import type {FC,ReactNode} from "react";
import {NavLink} from "react-router-dom";
import {Input} from "antd";
import {SearchOutlined} from "@ant-design/icons";

import {HeaderWrapper,HeaderLeft,HeaderRight} from "./style";
import HeaderTitles from "@/assets/data/header_titles.json";

interface IProps {
    children?:ReactNode
}

const AppHeader:FC<IProps> = ()=>{
    function showItem(obj:any){
        if(obj.type === "path"){
            return (
                <NavLink to={obj.link}
                    className={({isActive})=>{
                        return (isActive && "active") || undefined
                    }}
                >
                    {obj.title}
                    <i className="icon sprite_01"></i>
                </NavLink>
            )
        }else{
            return (
                <a href={obj.link} target="_blank" rel="noreferrer">{obj.title}</a>
            )
        }
    }
    return (
        <HeaderWrapper>
            <div className="content wrap-v1">
                <HeaderLeft>
                    <a href="/" className="logo sprite_01">网易云音乐</a>
                    <div className="title-list">
                        {
                            HeaderTitles.map((item)=>{
                                return (
                                    <div className="item" key={item.link}>
                                        {showItem(item)}
                                    </div>
                                )
                            })
                        }
                    </div>
                </HeaderLeft>
                <HeaderRight>
                    <Input className="search" placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined />}></Input>
                    <span className="center">创作者中心</span>
                    <span className="login">登录</span>
                </HeaderRight>
            </div>
            <div className="divider"></div>
        </HeaderWrapper>
    )
}

export default memo(AppHeader);
